var init, left, right, dot, prev,dotprev, pos = 0, arr = [];
function init() {
    dot = document.querySelector(".dot");
    left = document.querySelector('.left');
    right = document.querySelector('.right');
    crouselarr = Array.from(document.querySelectorAll(".img"));
    prev=arr[0];
}
init();
dot.onmouseover = function (e) {
    if (e.target.nodeName !== "LI") return;
    pos = Array.from(dot.children).indexOf(e.target);
    changePrev(crouselarr[pos], dot.children[pos])
}
left.onclick = function (e) {
    pos--;
    if (pos < 0) pos = 2;
    // console.log(arr[pos])
    changePrev(crouselarr[pos], dot.children[pos])
}
right.addEventListener("click", clickHandler);
function clickHandler(e) {
    pos++;
    if (pos > 2) pos = 0;
    // console.log(arr[pos])
    changePrev(crouselarr[pos], dot.children[pos])
}
function changePrev(elem, dotelem) {
    // console.log(prev)
    // console.log(elem)
    if (prev)
        prev.style.opacity = 0;
    elem.style.opacity = 1;
    prev = elem;
    if (dotprev)
        dotprev.style.backgroundColor = "white";
    dotelem.style.backgroundColor = "red";
    dotprev = dotelem;
}
function autoPlay() {
    setInterval(function () {
        var evt = new MouseEvent("click");
        right.dispatchEvent(evt);
    }, 5000)
}
autoPlay();